<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			[class^="box"] {
				height: 800px;
			}
			.box1 {
				width: 400px;
				border: 10px solid aqua;
				border-color: aqua transparent transparent transparent;
				border-radius: 50%;
			}

			.box2 {
				width: 382px;
				border: 10px solid aqua;
				border-color: red transparent transparent transparent;
				border-radius: 50%;
			}

			.box3 {
				width: 363px;
				border: 10px solid aqua;
				border-color: darkorange transparent transparent transparent;
				border-radius: 50%;
			}

			.box4 {
				width: 345px;
				border: 10px solid aqua;
				border-color: yellow transparent transparent transparent;
				border-radius: 50%;
			}

			.box5 {
				width: 328px;
				border: 10px solid aqua;
				border-color: greenyellow transparent transparent;
				border-radius: 50%;
			}

			.box6 {
				width: 310px;
				border: 10px solid aqua;
				border-color: lightskyblue transparent transparent transparent;
				border-radius: 50%;
			}
			.box7 {
				width: 292px;
				border: 10px solid aqua;
				border-color: darkviolet transparent transparent transparent;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2">
				<div class="box3">
					<div class="box4">
						<div class="box5">
							<div class="box6">
								<div class="box7"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
